.el-message{
    min-width:380px*@ratio!important;
    border-width: 1px*@ratio!important;
    padding: 15px*@ratio 15px*@ratio 15px*@ratio 20px*@ratio!important;
    border-radius: 4px*@ratio!important;
    .el-message__icon{
        margin-right: 10px*@ratio;
        font-size: 14px*@ratio;
    }
    .el-message__content{
        font-size: 14px*@ratio;
    }
}
.el-loading-mask{
    .el-icon-loading{
        font-size: 25px*@ratio;
    }
}
.el-tooltip__popper{
    font-size: 14px*@ratio!important;
    border-radius: 4px*@ratio;
}

#index {
    section {
        .left {
            .rain{
                @aa:296px*@ratio;
                width:calc(~'100% - '@aa);
                padding :0 0 12.5px*@ratio;
                h1{
                    letter-spacing:2px*@ratio;
                    color: #fff;
                    font-size: 18px*@ratio;
                    font-weight: normal;
                    margin-bottom: 10px*@ratio;
                    height: 40px*@ratio;
                    border-radius: 5px*@ratio 0 0 0;
                    font-style: italic;
                    padding-left: 10px*@ratio;
                    background: linear-gradient(to right, #08425f, transparent);
                    display: flex;
                    align-items: center;
                    img{
                        height: 20px*@ratio;
                        margin-right: 10px*@ratio;
                    }
                }
                .rain-map{
                    height: 175px*@ratio;
                    margin:  0 0 10px*@ratio;
                }
                .rank{
                    font-size: 10px*@ratio;
                    padding: 0 10px*@ratio;
                    .title{
                        letter-spacing: 1px*@ratio;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: rgba(255,255,255,.4);
                        p{
                            font-size: 13px*@ratio;
                            color: #fff;
                        }
                    }
                    ul{
                        margin-top:10px*@ratio;
                        height: 170px*@ratio;
                        overflow-y: auto;
                        &::-webkit-scrollbar{
                            width: 0;
                            height: 0;
                        }
                        li{
                            display: flex;
                            align-items: center;
                            height: 19px*@ratio;
                            color: #A5A4A4;
                            margin-top:2px*@ratio;
                            b{
                                font-weight: normal;
                                width: 29px*@ratio;
                                text-align: center;
                                height: 19px*@ratio;
                                line-height: 19px*@ratio;
                                img{
                                    height: 100%;
                                }
                            }
                            span{
                                width: 70px*@ratio;
                                padding-left: 5px*@ratio;
                            }
                            .progress{
                                width: 132px*@ratio;
                                height: 7px*@ratio;
                                background: #0b2a49;
                                div{
                                    height: 100%;
                                    border-radius: 3.5px*@ratio;
                                    background: linear-gradient(to right, #0080fc, #0e99d9);
                                }
                            }
                            p{
                                width:35px*@ratio;
                                text-align: right;
                            }
                            &:first-child .progress div{
                                background: linear-gradient(to right, #f2707a, #f51424);
                            }
                            &:nth-child(2) .progress div{
                                background: linear-gradient(to right, #eb9766, #f66914);
                            }
                            &:nth-child(3) .progress div{
                                background: linear-gradient(to right, #c59b4e, #bf903b);
                            }
                        }
                    }
                }
            }
            .water{
                width:296px*@ratio;
                padding:0 0 12.5px*@ratio;

                h1{
                    letter-spacing: 1px*@ratio;
                    border-radius: 5px*@ratio 0 0 0;
                    color: #fff;
                    font-size: 20px*@ratio;
                    font-weight: normal;
                    margin-bottom:10px*@ratio;
                    height: 40px*@ratio;
                    font-style: italic;
                    padding-left: 10px*@ratio;
                    background: linear-gradient(to right, #08425f, transparent);
                    display: flex;
                    align-items: center;
                    img{
                        height: 20px*@ratio;
                        margin-right: 5px*@ratio;
                    }
                }
                .li{
                    letter-spacing: 1px*@ratio;
                    display: flex;
                    align-items: center;
                    height: 40px*@ratio;
                    margin-top: 5px*@ratio;
                    font-size: 13px*@ratio;
                    color: rgba(255,255,255,.8);
                    padding: 0 11px*@ratio;
                    img{
                        width: 25px*@ratio;
                        margin-right:5px*@ratio;
                    }
                    span{
                        width: 50px*@ratio;
                    }
                    p{
                        width: 65px*@ratio;
                        color: rgba(255,255,255,.4);
                        font-size: 10px*@ratio;
                        text-align: center;
                        b{
                            font-weight: normal;
                            color:#FFB42E ;
                            display: block;
                            font-size: 13px*@ratio;
                            padding-top: 4px*@ratio;
                        }
                    }
                }
                .tab1{
                    letter-spacing: 1px*@ratio;
                    height: 33.5px*@ratio;
                    line-height: 33.5px*@ratio;
                    margin:8px*@ratio 0;
                    display: flex;
                    background: #0b2a49;
                    font-size: 13px*@ratio;
                    li{
                        flex: 1;
                        cursor: pointer;
                        text-align: center;
                        color: rgba(255,255,255,.4);
                        border-bottom:2px*@ratio solid transparent;
                        &.active{
                            color: #fff;
                            border-color: #fff;
                        }
                    }
                }
                .table{
                    tbody{
                        height: 170px*@ratio;
                    }
                }
            }
        }
        .right {
            float: right;
            width: 579.5px*@ratio;

            & > li {
                float: left;
                width: 281px*@ratio;
                height: 285px*@ratio;
                margin: 17px*@ratio 17px*@ratio 0 0;
                position: relative;

                &:nth-child(2n) {
                    margin-right: 0;
                }

                &:first-child, &:nth-child(2) {
                    height: 298px*@ratio;
                    margin-top: 0;
                }

                .mess {
                    position: absolute;
                    bottom: 100%;
                    left: 0;
                    width: 100%;
                    background: linear-gradient(to right, transparent, rgba(255, 0, 0, .6), transparent);
                    color: #fff;
                    font-size: 17px*@ratio;
                    text-align: center;
                    height: 40px*@ratio;
                    line-height: 40px*@ratio;
                    margin-bottom: 7px*@ratio;
                    letter-spacing: 1px*@ratio;
                    overflow: hidden;

                    span {
                        margin-left: 17px*@ratio;
                    }
                }

                &.response{
                    .content{
                        .el-timeline {
                            padding: 15px*@ratio 0 0 0;
                            .el-timeline-item {
                                padding-bottom: 5px*@ratio;

                                .el-timeline-item__tail {
                                    border-left: 2px*@ratio solid #10AFF3;
                                    left: 4px*@ratio;
                                }

                                .el-timeline-item__node {
                                    background: #10AFF3;
                                    left: 0;
                                    width: 10px*@ratio;
                                    height: 10px*@ratio;

                                }

                                .el-timeline-item__wrapper {
                                    padding-left: 15px*@ratio;

                                    .el-timeline-item__timestamp {
                                        color: rgba(255, 255, 255, .4);
                                        font-size: 10px*@ratio;

                                        &.is-top {
                                            margin-bottom: 6px*@ratio;
                                            padding-top: 2px*@ratio;
                                        }
                                    }

                                    .el-timeline-item__content {
                                        color: rgba(255, 255, 255, .6);
                                        font-size: 10px*@ratio;
                                        line-height: 15px*@ratio;
                                        padding: 7px*@ratio;
                                        background: #093858;
                                    }
                                }
                            }
                        }
                    }
                }

                .title {
                    font-size: 18px*@ratio;
                    font-style: italic;
                    display: flex;
                    align-items: center;
                    height: 40px*@ratio;
                    color: #fff;
                    padding-left:10px*@ratio;
                    letter-spacing: 2px*@ratio;
                    border-radius: 5px*@ratio 5px*@ratio 0 0;
                    background:linear-gradient(to right, #08425f,transparent);
                    img{
                        height: 20px*@ratio;
                        margin-right: 5px*@ratio;
                    }
                }

                .video {
                    cursor: pointer;
                    text-align: center;
                    position: absolute;
                    font-size: 10px*@ratio;
                    color: rgba(255, 255, 255, .6);
                    right: 11px*@ratio;
                    top: 7px*@ratio;

                    img {
                        display: block;
                        margin: 0 auto;
                        height: 24px*@ratio;
                    }
                }

                .content {
                    @c: 45px*@ratio;
                    overflow: auto;
                    height: calc(~'100% - ' @c);
                    padding: 0 10px*@ratio;
                    font-size: 10px*@ratio;
                    color: rgba(255, 255, 255, .6);

                    &,*{
                        &::-webkit-scrollbar {
                            width: 0;
                            height: 0;
                        }
                    }

                    .th,.td{
                        float: left;
                        position: relative;

                        &:first-child {
                            padding: 0 13.5px*@ratio;
                            @d: 48.5px*@ratio;
                            width: calc(~'100% - ' @d);
                        }

                        &:last-child {
                            width: 48.5px*@ratio;
                            text-align: center;
                        }
                    }

                    .thead {
                        background: linear-gradient(to bottom, transparent, #091d2a);
                        height: 26px*@ratio;
                        line-height: 26px*@ratio;
                    }

                    .tbody {
                        @e: 26px*@ratio;
                        height: calc(~'100% - ' @e);
                        overflow: auto;
                        padding: 8px*@ratio 0 0;
                        color: #A5A4A4;

                        li {
                            height: 20.5px*@ratio;
                            line-height: 20.5px*@ratio;

                            .td:last-child {
                                font-size: 13px*@ratio;
                                color: #FFB42E;
                            }

                            i {
                                color: rgba(255, 255, 255, .6);
                                cursor: pointer;
                                display: none;

                                &:first-child {
                                    margin-right: 7px*@ratio;
                                }

                                &:hover {
                                    color: #fff;
                                }
                            }

                            .point {
                                width: 6px*@ratio;
                                height: 6px*@ratio;
                                border-radius: 50%;
                                display: block;
                                position: absolute;
                                background: #3a4f65;
                                left: 2px*@ratio;
                                top: 50%;
                                margin-top: -3px*@ratio;
                            }

                            &.online {
                                .point {
                                    background: #10AFF3;
                                }

                                i {
                                    display: inline-block;
                                }
                            }
                        }
                    }

                    .leader, .member {
                        position: relative;
                        padding: 8px*@ratio 31px*@ratio 0;
						padding-right: 10px*@ratio;
                        background: linear-gradient(to bottom, transparent, #091d2a);

                        .el-icon-user-solid {
                            position: absolute;
                            left: 10px*@ratio;
                            top: 7px*@ratio;
                            font-size: 13px*@ratio;
                            color: #10AFF3;
                        }

                        h4 {
                            color: rgba(255, 255, 255, .8);
                            margin-bottom: 5px*@ratio;
                            font-weight: normal;
                        }

                        .person {
                            height: 26px*@ratio;
                            line-height: 26px*@ratio;
                            color: rgba(255, 255, 255, .4);

                            span {
                                margin-right: 13px*@ratio;
								width: 40px*@ratio;
                            }
							p {flex: 1;}

                            i {
                                font-size: 13px*@ratio;
                                float: right;
                                line-height: 26px*@ratio;
                                cursor: pointer;

                                &:hover {
                                    color: #fff;
                                }
                            }
                        }
                    }

                    .leader {
                        height: 50px*@ratio;
                    }

                    .member {
                        @f: 50px*@ratio;
                        height: calc(~'100% - ' @f);
                        padding-top: 10px*@ratio;
                    }

                }
            }
        }
    }
    .pre-data{
        width: 800px*@ratio;
        height:450px*@ratio;
        video{
            width: 100%;
            height: 450px*@ratio;
            object-fit: fill;
            background:gray;
        }
        ul{
            height: 350px*@ratio;
            overflow: hidden;
            overflow-y:auto ;
            padding: 10px*@ratio 0 0;
            li{
                font-size: 15px*@ratio;
                color: #fff;
                float: left;
                width: 100/3%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px*@ratio;
                height: 40px*@ratio;
                input{
                    font-size: 15px*@ratio;
                    border: 1px*@ratio solid #eee;
                    width: 45%;
                    background: none;
                    color: #fff;
                    padding: 0 5px*@ratio;
                }
            }
        }
        .bottom{
            text-align: center;
            padding:10px*@ratio 0;
            button{
                cursor: pointer;
                background: #0b2a49;
                border: 0;
                font-size: 14px*@ratio;
                color: #fff;
                width: 80px*@ratio;
                height:35px*@ratio;
            }
        }
    }
    .map-video{
        width: 600px*@ratio;
        height: 400px*@ratio;
        video{
            width: 100%;
            height: 90%;
            object-fit: fill;
            background:gray;
        }
    }
    .map-rain{
        width: 600px*@ratio;
        height:500px*@ratio;
        .detail{
            height: 90%;
            padding:15px*@ratio;
            color: #0ac4ce;
            font-size: 12px*@ratio;
            .top{
                border-bottom: 1px*@ratio solid #0b5a86;
                padding: 5px*@ratio 0 10px*@ratio;
                p{
                    line-height: 20px*@ratio;
                    span{
                        color: rgba(255,255,255,.8);
                    }
                }
            }
            .content{
                padding:10px*@ratio 0;
                *::-webkit-scrollbar{
                    background: none;
                    width: 8px*@ratio;
                    height: 8px*@ratio;
                }
                *::-webkit-scrollbar-thumb{
                    background: #404f68;
                    border-radius: 4px*@ratio;
                }
                h1{
                    font-weight: normal;
                    text-align: center;
                    font-size: 13px*@ratio;
                    margin: 30px*@ratio 0 10px*@ratio;
                }
                time{
                    display: block;
                    text-align: center;
                    margin:0 0 10px*@ratio;
                }
                .charts{
                    height: 250px*@ratio;
                }
                .table{
                    height: 250px*@ratio;
                    overflow: auto;
                    li{
                        height: 30px*@ratio;
                        line-height:30px*@ratio;
                        border-bottom: 1px*@ratio dashed #0b5a86;
                        overflow: hidden;
                        text-align: center;
                        p{
                            float: left;
                            width: 60%;
                        }
                        p:last-child{
                            width: 40%;
                            float: left;
                            border-left:1px*@ratio solid #0b5a86 ;
                        }
                        &:first-child{
                            border-top: 1px*@ratio dashed #0b5a86;
                        }
                    }
                }
            }
            .el-radio-button__inner{
                color: #fe840b;
                border-radius: 0;
            }
            .el-radio-button__orig-radio:checked+.el-radio-button__inner{
                background-color:#fe840b;
                border-color: #fe840b;
                color: #fff;
                box-shadow: none;
            }
            .el-radio-button--mini .el-radio-button__inner{
                padding: 7px*@ratio 15px*@ratio;
                font-size: 12px*@ratio;
            }
        }
    }
    .map-waterLv{
        width: 600px*@ratio;
        height:500px*@ratio;
        .detail{
            height: 90%;
            padding: 15px*@ratio;
            color: rgba(255,255,255,.8);
            font-size: 12px*@ratio;
            p{
                margin: 0 0 10px*@ratio;
            }
            .mess{
                display: flex;
                align-items: center;
                line-height: 20px*@ratio;
                margin: 0 0 30px*@ratio;
                span{
                    text-align: center;
                    width:100px*@ratio;
                    b{
                        font-size: 15px*@ratio;
                        font-weight: normal;
                        display: block;
                        text-align: center;
                    }
                }
            }
            .charts{
                height: 200px*@ratio;
            }
            table{
                width: 100%;
                text-align: center;
                border-color: #10AFF3;
                border-style:solid;
                border-width:1px*@ratio 0 0 1px*@ratio;
                th{
                    background: #0b2a49;
                    color:#10AFF3;
                }
                th,td{
                    font-weight: normal;
                    height: 25px*@ratio;
                    border-color:#10AFF3;
                    border-style:solid;
                    border-width:0 1px*@ratio 1px*@ratio 0;
                }
            }
            .bottom{
                display: flex;
                justify-content: space-between;
                padding: 10px*@ratio 0 0 ;
                span{
                    color: #10AFF3;
                    cursor: pointer;
                }
            }
        }
    }
    .map-river{
        width: 600px*@ratio;
        height:500px*@ratio;
        color: rgba(255,255,255,.8);
        .detail{
            padding:0 15px*@ratio 15px*@ratio;
            font-size: 13px*@ratio;
            p{
                line-height: 43px*@ratio;
                border-bottom: 1px*@ratio solid rgba(255,255,255,.3);
                span{
                    width: 40%;
                    display: inline-block;
                }
            }
            .charts{
                margin: 15px*@ratio 0;
                height:250px*@ratio;
            }
            time{
                display: block;
                text-align: center;
            }
        }
    }
    .map-flood{
        width: 600px*@ratio;
        height:350px*@ratio;
        ul{
            padding: 20px*@ratio;
            li{
                line-height:30px*@ratio;
                font-size: 12px*@ratio;
                border-bottom: 1px*@ratio dashed #3b4d61;
                color: rgba(2,240,244, 0.8);
                span{
                    display: inline-block;
                    width: 30%;
                }
            }
        }
		.bottom-view {
			position: absolute; 
			bottom: 0px; 
			right: 20px*@ratio; 
			// width: 40%; 
			height: 30px*@ratio; 
			display: flex; 
			align-items: center;
			font-size: 14px*@ratio;
			color: #fff;
			img {
				padding-left: 15px*@ratio;
				vertical-align: middle;
			}
			.right-btn {
				margin-left: 35px*@ratio;
			}
		}
        button{
            cursor: pointer;
            background: #0b2a49;
            border: 0;
            font-size: 14px*@ratio;
            color: #fff;
            width: 100%;
            height:35px*@ratio;
            display: block;
            margin: 0 auto;
			text-align: right;
			padding-right: 90px;
        }
    }
}
